<template>
  <form-item>
    <el-form size="small" label-width="90px">
      <el-form-item label="id">
        <el-input v-model="options.id" placeholder="请输入id"></el-input>
      </el-form-item>
      <el-tabs v-model="activeName2">
        <el-tab-pane name="html" label="html">
          <el-form-item label-width="0">
            <el-input
              type="textarea"
              v-model="myHtml.template"
              @input="setOptions"
              autosize
            ></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="script" label="script">
          <el-form-item label-width="0">
            <el-input
              type="textarea"
              v-model="myHtml.script"
              @input="setOptions"
              autosize
            ></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="style" label="style">
          <el-form-item label-width="0">
            <el-input
              type="textarea"
              v-model="myHtml.style"
              @input="setOptions"
              autosize
            ></el-input>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </form-item>
</template>

<script>
import common from '../mixin';
export default {
  name: 'HtmlTool',
  mixins: [common],
  data() {
    return {
      myHtml: {
        template: '',
        script: '',
        style: ''
      },
      activeName2: 'html',
      // str: '',
      timer: null
    };
  },
  watch: {
    'component.__options__': {
      handler(val) {
        Object.assign(this.myHtml, this.$options.data().myHtml);
        const b = JSON.parse(JSON.stringify(val));
        this.setOptions(b.html, true);
      },
      deep: true
    }
  },
  mounted() {
    const b = JSON.parse(JSON.stringify(this.component['__options__']));
    this.setOptions(b.html);
  },
  methods: {
    setOptions(e, flag) {
      // const b = JSON.parse(JSON.stringify(this.component["__options__"]));
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        const template = e.match(/<template>([\s\S]*?)<\/template>/);
        const script = e.match(/<script>([\s\S]*?)<\/script>/);
        const style = e.match(/<style>([\s\S]*?)<\/style>/);
        this.myHtml.template = template
          ? template[0]
          : flag
          ? ''
          : this.myHtml.template;
        this.myHtml.script = script
          ? script[0]
          : flag
          ? ''
          : this.myHtml.script;
        this.myHtml.style = style ? style[0] : flag ? '' : this.myHtml.style;
        const { template: a, script: b, style: c } = this.myHtml;
        this.component['__options__'].html = a + b + c;
      }, 1000);
    }
  }
};
</script>
<style lang="scss" scoped>
.params-box ::v-deep {
  .el-textarea__inner {
    height: calc(50vh - 230rem) !important;
    overflow-y: auto;
  }
}
</style>